<template>
   <div>
    <!-- 查询条件 -->
    <el-form style="height:50px" :model="page" :inline="true" >
        <el-form-item >
            <el-input v-model="page.userName" placeholder="请输入要查询的用户名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="page.fullName" placeholder="请输入要查询的姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetUserInfo()" class="el-icon-search">搜索</el-button>
            <el-button type="danger" @click="DeleteBatchUser()"
             icon="el-icon-delete">批量删除</el-button>
        </el-form-item>
    </el-form>
    <!-- 用户列表 -->
    <el-table border ref="multipleTable" :data="UserList" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>       
        <el-table-column prop="userName"  label="用户名"></el-table-column>
        <el-table-column prop="fullName"  label="姓名"></el-table-column>       
        <el-table-column prop="avatar"    label="头像">
            <template slot-scope="scope">
                  <!-- <img v-if="scope.row.avatar" :src="'http://localhost:5000' + scope.row.avatar" class="avatar"/> -->
                   <el-avatar :size="80" v-if="scope.row.avatar" :src="'http://localhost:5000' + scope.row.avatar" ></el-avatar>
            </template>
        </el-table-column>         
        <el-table-column prop="email"     label="邮箱"></el-table-column>
        <el-table-column prop="remark"    label="备注" width="150px;">
            <template slot-scope="scope">
                <span v-html="scope.row.remark"></span>
            </template>
        </el-table-column>
        <el-table-column prop="loginIP"   label="登录IP"></el-table-column>
        <el-table-column prop="loginTime" label="登录时间" width="200px;">
            <!-- <template slot-scope="scope">{{ scope.row.loginTime}}</template> -->
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="danger" class="el-icon-delete" circle @click="DeleteUser(scope.row.userId)"></el-button>
                <el-button type="primary" class="el-icon-edit" circle @click="openUpdateUserDoing(scope.row.userId)"></el-button>
            </template>
      </el-table-column>
    </el-table>
    <!-- 使用dialog对话框 修改用户信息 -->
    <!-- 父组件的 userId 属性传递给子组件，并为子组件设置一个唯一的 key -->
      <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
        <UpdUserView
         ref="UpdUserView"
         :userId="userId"
         :key="new Date().getTime()"></UpdUserView>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editUser()">修 改</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>         
        </div>
      </el-dialog>
    <!-- 完整分页 -->
    <div style="display:flex;justify-content:center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[1, 2, 3, 10]"
            :page-size="page.pageSize"
            layout="slot, sizes"
            :total="totalCount"
            prev-text="上一页"
            next-text="下一页">
            <span>
                共 <b style="color:red">{{totalCount}}</b> 条,
                每页 <b style="color:red">{{page.pageSize}}</b>,
                当前 <b style="color:red">{{page.pageIndex}} / {{pageCount}}</b> 页 </span>
        </el-pagination>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[1, 2, 3, 10]"
            :page-size="page.pageSize"
            layout="slot, prev, pager, next"
            :total="totalCount"
            prev-text="上一页"
            next-text="下一页">
            <button type="primary" @click="handleCurrentChange(1)">首页</button>
        </el-pagination>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[1, 2, 3, 10]"
            :page-size="page.pageSize"
            layout="slot, jumper"
            :total="totalCount"
            prev-text="上一页"
            next-text="下一页">
            <button type="primary" @click="handleCurrentChange(pageCount)">尾页</button>
        </el-pagination>
    </div>

</div>
</template>
<script>
import { UserInfo } from "../../api/admin.js";
import { UserDelJS } from "../../api/admin.js";
import { UserBatchDel } from "../../api/admin.js";

import UpdUserView from '../User/UpdateUser.vue'  //修改页面
export default {  
    //父组件传值 => 用户修改
    components:{
        UpdUserView
    },
    data() {
        return {
            //分页
            page:{
                userName:"",
                fullName:"",
                pageIndex:1,
                pageSize:2,
            },
            totalCount:0,
            pageCount:0,
            UserList:[],  //用户列表集合
            multipleTable:[],  //复选框集合
            dialogFormVisible:false,
            //用于子父组件传值编辑功能中传递用户Id给子组件
            userId:0
        }
    },
    methods: {
        //复选框
        handleSelectionChange(val){
            this.multipleTable = val;
        },
        //页大小
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetUserInfo();
        },
        //页码
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetUserInfo();
        },
        //【用户信息】
        GetUserInfo(){
            var moment = require('moment'); 
            UserInfo(this.page).then(res=>{
                this.UserList= res.data.list;
                this.UserList.forEach(ele=>{
                    ele.loginTime = moment(ele.loginTime).format("YYYY年MM月DD日 HH:mm:ss");
                });
                this.totalCount= res.data.totalCount;
                this.pageCount= res.data.pageCount;
            });
        },
        //【删除用户】
        DeleteUser(userId) {
            this.$confirm('确定要删除吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
            .then(() => {
                UserDelJS(userId).then(res=>{                    
                    if (res.data.result == 200) {              
                        this.$message({ type: "success", message: res.data.message });
                        this.GetUserInfo();
                    } 
                    else {
                        this.$message({ type: "error", message: res.data.message });
                        this.GetUserInfo();
                    }
                });         
            }).catch(() => {
            this.$message({type: 'info',duration:800,message: '已取消删除'});          
            });
        },
        //【批量删除用户】
        DeleteBatchUser() {    
            if(this.multipleTable.length==0){
                this.$message.error("请至少选择一项要删除的信息！");
                return;
            }    
            this.$confirm('确定要批量删除吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
            .then(() => {
                let ids = [];
                this.multipleTable.forEach(ele=>{                    
                    ids.push(ele.userId);
                });
                UserBatchDel(ids).then(res=>{                    
                    if (res.data.result == 200) {              
                        this.$message({ type: "success", message: res.data.message });
                        this.GetUserInfo();
                    } 
                    else {
                        this.$message({ type: "error", message: res.data.message });
                        this.GetUserInfo();
                    }
                });         
            }).catch(() => {
            this.$message({type: 'info',duration:800,message: '已取消删除'});          
            });
        },
        //打开修改Dalog弹框
        openUpdateUserDoing(id){
            this.dialogFormVisible = true;
            this.userId=id;
        },
        //用户修改
        editUser(){
            /////////在 Vue.js 中，$refs 是一个实例属性，用于访问组件中被 ref 属性标记的子组件或DOM元素。通过 $refs，你可以直接访问子组件的属性和方法，或者访问 DOM 元素并执行相关操作。
            //父组件调用子组件修改用户信息的方法
            this.$refs.UpdUserView.UpdateUser('form');           
        },
    },
    created() {
        this.GetUserInfo();
    },
}
</script>
<style>
    
</style>
